<template>
  <div class="page-container">
    <el-card class="main-card">
      <div slot="header" class="card-header">
        <span>库存预警</span>
        <div class="header-operations">
          <el-button type="primary" @click="handleExport">导出预警</el-button>
        </div>
      </div>

      <!-- 预警概览 -->
      <div class="overview-section">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-icon danger">
                <i class="el-icon-warning"></i>
              </div>
              <div class="stat-content">
                <div class="stat-title">库存紧缺</div>
                <div class="stat-value danger">5</div>
                <div class="stat-desc">个商品低于最低库存50%</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-icon warning">
                <i class="el-icon-warning-outline"></i>
              </div>
              <div class="stat-content">
                <div class="stat-title">库存预警</div>
                <div class="stat-value warning">12</div>
                <div class="stat-desc">个商品低于最低库存</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card" shadow="hover">
              <div class="stat-icon success">
                <i class="el-icon-success"></i>
              </div>
              <div class="stat-content">
                <div class="stat-title">库存正常</div>
                <div class="stat-value success">283</div>
                <div class="stat-desc">个商品库存充足</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 搜索栏 -->
      <div class="search-section">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="预警类型">
            <el-select v-model="searchForm.alertType" placeholder="请选择预警类型" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option label="库存紧缺" value="shortage"></el-option>
              <el-option label="库存预警" value="warning"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select v-model="searchForm.category" placeholder="请选择商品分类" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option label="手机" value="phone"></el-option>
              <el-option label="平板" value="tablet"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 预警列表 -->
      <div class="table-section">
        <el-table
          :data="alertList"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="productCode" label="商品编号" width="120"></el-table-column>
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="category" label="分类" width="100"></el-table-column>
          <el-table-column prop="quantity" label="当前库存" width="100"></el-table-column>
          <el-table-column prop="minQuantity" label="最低库存" width="100"></el-table-column>
          <el-table-column prop="maxQuantity" label="最高库存" width="100"></el-table-column>
          <el-table-column label="预警状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getAlertType(scope.row.quantity, scope.row.minQuantity)">
                {{ getAlertText(scope.row.quantity, scope.row.minQuantity) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastPurchaseTime" label="最近采购" width="180"></el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handlePurchase(scope.row)">采购</el-button>
              <el-button type="text" size="small" @click="handleAdjust(scope.row)">调整</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>

    <!-- 调整库存阈值对话框 -->
    <el-dialog
      title="调整库存阈值"
      :visible.sync="dialogVisible"
      width="500px"
      class="threshold-dialog"
    >
      <el-form :model="thresholdForm" label-width="100px">
        <el-form-item label="商品名称">
          <el-input v-model="thresholdForm.productName" disabled></el-input>
        </el-form-item>
        <el-form-item label="最低库存">
          <el-input-number 
            v-model="thresholdForm.minQuantity" 
            :min="1"
            :max="thresholdForm.maxQuantity"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="最高库存">
          <el-input-number 
            v-model="thresholdForm.maxQuantity" 
            :min="thresholdForm.minQuantity"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveThreshold">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'InventoryAlerts',
  data() {
    return {
      searchForm: {
        alertType: '',
        category: ''
      },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      alertList: [
        {
          productCode: 'P001',
          productName: 'iPhone 15 Pro',
          category: '手机',
          quantity: 5,
          minQuantity: 20,
          maxQuantity: 100,
          lastPurchaseTime: '2024-03-10 15:30:00'
        },
        {
          productCode: 'P002',
          productName: '华为 MatePad Pro',
          category: '平板',
          quantity: 15,
          minQuantity: 20,
          maxQuantity: 80,
          lastPurchaseTime: '2024-03-12 09:20:00'
        }
      ],
      dialogVisible: false,
      thresholdForm: {
        productName: '',
        minQuantity: 0,
        maxQuantity: 0
      }
    }
  },
  methods: {
    handleSearch() {
      this.loading = true
      this.fetchData()
    },
    resetSearch() {
      this.searchForm = {
        alertType: '',
        category: ''
      }
      this.handleSearch()
    },
    handleExport() {
      console.log('导出预警')
    },
    handlePurchase(row) {
      console.log('采购', row)
    },
    handleAdjust(row) {
      this.thresholdForm = {
        productName: row.productName,
        minQuantity: row.minQuantity,
        maxQuantity: row.maxQuantity
      }
      this.dialogVisible = true
    },
    handleSaveThreshold() {
      console.log('保存阈值', this.thresholdForm)
      this.dialogVisible = false
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      setTimeout(() => {
        this.loading = false
        this.total = 100
      }, 500)
    },
    getAlertType(quantity, minQuantity) {
      if (quantity <= minQuantity * 0.5) return 'danger'
      if (quantity <= minQuantity) return 'warning'
      return 'success'
    },
    getAlertText(quantity, minQuantity) {
      if (quantity <= minQuantity * 0.5) return '紧缺'
      if (quantity <= minQuantity) return '预警'
      return '正常'
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 120px);
}

.main-card {
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #304156;
}

.overview-section {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 8px;
  display: flex;
  padding: 20px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon.danger {
  background-color: #f56c6c;
}

.stat-icon.warning {
  background-color: #e6a23c;
}

.stat-icon.success {
  background-color: #67c23a;
}

.stat-icon i {
  font-size: 24px;
  color: #fff;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-value.danger {
  color: #f56c6c;
}

.stat-value.warning {
  color: #e6a23c;
}

.stat-value.success {
  color: #67c23a;
}

.stat-desc {
  font-size: 12px;
  color: #909399;
}

.search-section {
  margin-bottom: 20px;
}

.search-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.table-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* Element UI 主题覆盖 */
:deep(.el-button--primary) {
  background-color: #ff6b00;
  border-color: #ff6b00;
}

:deep(.el-button--primary:hover),
:deep(.el-button--primary:focus) {
  background-color: #ff8533;
  border-color: #ff8533;
}

:deep(.el-button--text) {
  color: #ff6b00;
}

:deep(.el-button--text:hover),
:deep(.el-button--text:focus) {
  color: #ff8533;
}

.el-card {
  border-radius: 8px;
}

.el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #e6e6e6;
}

.el-table {
  color: #304156;
}

.el-table th {
  background-color: #f5f7fa;
  color: #304156;
}

:deep(.el-tag) {
  border-radius: 4px;
}

:deep(.el-form-item__label) {
  color: #304156;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

:deep(.el-input__inner:focus) {
  border-color: #ff6b00;
}

:deep(.el-select .el-input__inner:focus) {
  border-color: #ff6b00;
}

:deep(.el-tag--success) {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

:deep(.el-tag--warning) {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}

:deep(.el-tag--danger) {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}

:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid #e6e6e6;
}
</style> 